<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">

<head th:include="include :: header"></head>
<style>
    * {
        list-style: none;
        font-family: PingFangSC-Regular;
    }

    a {
        text-decoration: none;
    }

    .panel {
        width: 100%;
        height: 100%;
        background-image: url(./img/background_img.png);
        background-repeat: no-repeat;
    }

    .box {
        text-align: center;
        margin: 0 auto;
        padding-top: 113px;
        padding-bottom: 144px;
    }

    .box .logo {
        display: flex;
        justify-content: center;
        align-items: Center;
    }

    .box .logo .logo_img {
        width: 141px
    }

    .box .logo .logo_left {
        font-size: 23px;
        color: #fff;
        font-family: SANS-SERIF;
        /* display: inline-block; */
        margin-left: 10px;
        position: relative;
        top: 6px;
    }

    .box .logo .logo_right {
        font-size: 36px;
        color: #fff;
        font-family: impact;
        margin-left: 5px;
    }

    ul {
        display: flex;
        justify-content: center;
        margin-top: 58px;
    }

    ul li {
        min-width: 182px;
    }

    ul li .li_img {
        width: 47px;
        margin-bottom: 16px;
    }

    ul li .li_item {
    }

    ul li .li_item .li_item_bigtext {
        font-size: 14px;
        color: #fff;
        font-family: PingFangSC-Medium;
    }

    ul li .li_item .li_item_litteltext {
        font-size: 9px;
        color: #fff;
    }

    ul li .li_describe {
        min-width: 140px;
        min-height: 72px;
        margin-top: 17px;
        margin-bottom: 19px;
    }

    ul li .li_describe p {
        font-size: 9px;
        color: #fff;
        /* margin: 0; */
    }

    ul li .li_href {
        display: inline-block;
        width: 90px;
        text-align: center;
        height: 26px;
        border: 1px solid #fff;
        border-radius: 3px;
        line-height: 25px;
        font-size: 11px;
        color: #fff;
    }
</style>

<body style="margin: 0;">
<div class="panel panel-default">
    <!--<div class="panel-heading"></div>-->
    <!--<div>
<li th:each="menu : ${menus}"><a style="font-size: 50px" class="J_menuItem" href="graph_echarts.html" th:text="${menu.text}" th:href="${menu.attributes.url}">
</a>
</li>
</div>-->
    <div class="box">
        <div class="logo">
            <img class="logo_img" src="/img/logo.png"/>
            <span class="logo_left">Project Management</span>
            <span class="logo_right">system</span>
        </div>
        <ul>
            <li style="margin-right: 60px;display: none" id="1111">
                <img class="li_img" src="/img/setting.png"/>
                <div class="li_item">
                    <span class="li_item_bigtext">系统管理</span>
                    <span class="li_item_litteltext">system management</span>
                </div>
                <div class="li_describe">
                    <p>代码生成、用户管理、系统菜单</p>
                    <p>部门管理、给个联盟词典</p>
                    <p>在线用户、运行监控</p>
                </div>
                <a class="li_href" id="systemmanagement">查看</a>
            </li>
            <li style="margin-right: 60px;display: none" id="2222">
                <img class="li_img" src="/img/SDKxiazai.png"/>
                <div class="li_item">
                    <span class="li_item_litteltext">SDK operation</span>
                </div>
                <div class="li_describe">
                    <p>渠道管理</p>
                </div>
                <a class="li_href" id="SDKoperation">查看</a>
            </li>
            <li id="3333" style="display: none">
                <img class="li_img" src="/img/yunying.png"/>
                <div class="li_item">
                    <span class="li_item_bigtext">产品运营</span>
                    <span class="li_item_litteltext">Product operation</span>
                </div>
                <div class="li_describe">
                    <p>产品管理</p>
                    <p></p>
                </div>
                <a class="li_href" id="Productoperation">查看</a>
            </li>
        </ul>
    </div>
</div>
<div th:include="include :: footer"></div>
<script type="text/javascript" th:inline="javascript">
    var ss = [[${menus}]];
    if (ss != null && ss != '') {
        for (var i = 0; i < ss.length; i++) {
            if (ss[i].id == 161) {
                $('#systemmanagement').attr('href', ss[i].attributes.url);
                $("#1111").show();
            } else if (ss[i].id == 172) {
                $('#SDKoperation').attr('href', ss[i].attributes.url);
                $("#2222").show();
            } else if (ss[i].id == 185) {
                $('#Productoperation').attr('href', ss[i].attributes.url);
                $("#3333").show();
            }
        }
    }
    /* console.log(ss);*/
</script>
</body>

</html>